<template>
  <div class="app-container">
    <h1 style="text-align: center;">医院设置管理列表</h1>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="医院名称">
            <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
        </el-form-item>
        
        <el-form-item label="医院编号">
            <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <div class="toolbar">
        <!-- 批量删除按钮 -->
        <el-button type="danger" icon="el-icon-delete" size="small" @click="removeBatch()">批量删除</el-button>
        <!-- 添加按钮 -->
        <el-button type="warning" icon="el-icon-plus" size="small" @click="addHospSet()">添加</el-button>
    </div>

    <!-- 列表 -->
    <el-table
        :data="list"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange">
            <!-- 复选框 -->
            <el-table-column type="selection" width="55" align="center"/>

            <!-- 标号字段 -->
			<el-table-column type="index" label="标号" width="50" align="center"/>
			
            <!-- 医院名称字段 -->
            <el-table-column prop="hosname" label="医院名称" align="center"/>
            
            <!-- 医院编号字段 -->
            <el-table-column prop="hoscode" label="医院编号" align="center"/>
            
            <!-- api基础地址字段 -->
            <el-table-column prop="apiUrl" label="api基础地址" align="center"/>
            
            <!-- 联系人字段 -->
			<el-table-column prop="contactsName" label="联系人" align="center"/>
            
            <!-- 联系电话字段 -->
			<el-table-column prop="contactsPhone" label="联系电话" align="center"/>
           
            <!-- 状态字段 -->
			<el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <!-- {{ scope.row.status ===1 ? "可用" : "不可用"}} -->
                    <p style="color: #67c23a;font-weight: bolder;" v-if="scope.row.status ===1">可用</p>
                    <p style="color: #ebb563;font-weight: bolder;" v-if="scope.row.status ===0">不可用</p>
                </template>
            </el-table-column>
             
            <!-- 操作字段 -->
            <el-table-column label="操作" width="290" align="center">
                <template slot-scope="scope">
                    <!-- 编辑按钮 -->
                    <el-button type="primary" size="mini" 
                        icon="el-icon-edit" @click="editById(scope.row.id)">
                        编辑 
                    </el-button>

                    <!-- 删除按钮 -->
                    <el-button type="danger" size="mini" 
                        icon="el-icon-delete" @click="removeDataById(scope.row.id)">
                        删除 
                    </el-button>

                    <!-- 锁定按钮 -->
                    <el-button type="warning" size="mini" v-if="scope.row.status === 1"
                        icon="el-icon-lock" @click="lockHospSet(scope.row)">
                        锁定 
                    </el-button>

                    <!-- 取消锁定按钮 -->
                    <el-button type="success" size="mini" v-if="scope.row.status === 0"
                        icon="el-icon-unlock" @click="lockHospSet(scope.row)">
                        解锁 
                    </el-button>
                </template>
            </el-table-column>
    </el-table>

    <!-- 分页插件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="limit"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
//引入js文件
import hospSet_api from '@/api/hosp/hospSet'
export default {
data(){
    return{
        //当前页数据
        page:1,
        //每页记录数数据
        limit:4,
        //搜框框数据
        searchObj:{},
        // 列表数据
        list:[],
        // 总记录数数据
        total:0,
        //复选框数据
        multipleSelection: []
    }
},

created(){
this.getList()
},

methods:{
    //分页方法
    getList(){
        hospSet_api.selectByPage(this.page,this.limit,this.searchObj)
        .then(res =>{
            //返回分页数据
            this.list=res.data.records
            //返回总记录数
            this.total=res.data.total
        })
        .catch(error =>{
            console.log(error)
        })
    },

    //删除方法
    removeDataById(id){
        //弹出确认框
        this.$confirm('此操作将永久删除该医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          hospSet_api.removeById(id).then(res => {
            //提示消息
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
            //刷新页面
            this.getList()
          })
        }).catch(() => {
                  
        });
    },

    //批量删除方法
    removeBatch(){
        let idList = []
        for(let i=0; i<this.multipleSelection.length; i++){
            let obj = this.multipleSelection[i]
            let id = obj.id
            idList.push(id)
        }
        this.$confirm('此操作将永久这些医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            hospSet_api.removeBatch(idList).then(res => {
                //提示信息
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                //刷新页面
                this.getList()
            })
        }).catch(() => {    
        });
    },

    //锁定和取消锁定方法
    lockHospSet(row){
        let id = row.id
        let status = row.status === 1 ? 0 : 1
        hospSet_api.lockHospSet(id,status).then(res => {
            this.$message.success("状态改变成功!")
            //刷新页面
            this.getList()
        })
    },

    // 选择复选框
    handleSelectionChange(selection){
        this.multipleSelection=selection
    },

    //改变每页显示条数
    handleSizeChange(val) {
        this.limit=val
        this.getList()
      },
    
    //改变当前页
    handleCurrentChange(val) {
        this.page=val
        this.getList()
    },

    //添加按钮方法
    addHospSet(){
        this.$router.push("/hospSet/add")
    },

    //编辑按钮方法
    editById(id){
        this.$router.push({
            path: 'edit/:id',
            query: { id: id }
        })
    }
}
}
</script>

<style scoped>

</style>